<template>
	<div class='container container-padding' v-if="shoppingSelectGoods">
		<nav-header></nav-header>
		<div class='page-title'>
			<span class='tit'>订单详情</span>
		</div>
		<div class='goods-order-list'>
			<goods-order-item></goods-order-item>
		</div>
		<!--收货地址  -->
		<div class='addres-info'>
			<div class='address-header' @click="selectAddress">
				<span class='title'>收货地址</span>
				<span class='change-btn'>修改</span>
			</div>
			<div class='address-body'>
				<div class='user-relation'>
					<span class='user-name'>{{shoppingSelectGoods.address_info.true_name}}</span>
					<span class='user-phone'>{{shoppingSelectGoods.address_info.mob_phone}}</span>
				</div>
				<div class='user-address'>
					<span class='address-details'>{{shoppingSelectGoods.address_info.area_info}}</span>
					<span class='address-details'>{{shoppingSelectGoods.address_info.address}}</span>
				</div>
			</div>
		</div>
		<!-- 商品价格属性 -->
		<div>
			<!-- <div class='order-place'>
      <span class='title'>金牌会员折扣</span>
      <span class='money'>50元</span>
    </div> -->
			<div class='order-place'>
				<span class='title'>运费</span>
				<!-- <image class='question' src='/images/question.svg' catchtap='showfreight'></image> -->
				<div class='flex-grow'></div>
				<span class='money'>{{shoppingSelectGoods.address_info ? shoppingSelectGoods.sprice:0}}元</span>
			</div>
			<div class='order-place'>
				<span class='title'>总价</span>
				<span class='money'>{{shoppingSelectGoods.goods_amount}}元</span>
			</div>
		</div>
		<!--<div class='order-place-colum'>
			<span class='title'>预定须知</span>
			<span class='order-explain'>购买后，活动前我们将不进行退款。不适合我是一些说明啦哈哈哈哈不允许之类的啦。</span>
		</div>-->
		<div class='order-place-colum remark-container'>
			<span class='title'>备注</span>
			<span class='remark'>{{shoppingSelectGoods.message ? shoppingSelectGoods.message : "向我们说明您的喜好或者发票信息"}}</span>
		</div>
		<!-- 
  <div class='discount-container'>
    <icon type='success' class='radio-btn'></icon>
    <span class='explain'>优惠券可抵扣500元</span>
    <div class='flex-grow'></div>
    <image src='/images/triangle.svg' class='icon-triangle'></image>
  </div> -->
		<div class='wallet-continer'>
			<img src='../../../static/img/purse.svg' class='icon-wallet' />
			<span class='explain'>钱包余额 0.00元</span>
			<div class='flex-empty'></div>
			<mt-switch v-model="isUserWallet"></mt-switch>
		</div>
		<footor-buy-bar :isUserWallet = "isUserWallet">
		</footor-buy-bar>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
	import goodsOrderItem from "@/pages/comfirm-order-detail/components/goods-order-item"
	import footorBuyBar from "@/pages/comfirm-order-detail/components/footor-buy-bar"

	export default {
		data() {
			return {
				isUserWallet: false
			}
		},
		computed: {
			...mapState(['shoppingSelectGoods'])
		},
		components: {
			"nav-header": header,
			"goods-order-item": goodsOrderItem,
			"footorBuyBar": footorBuyBar
		},
		mounted() {

		},
		created() {},
		methods: {
			selectAddress() {
				this.$router.push({
					name: 'Address',
					params: {
						page_from: "comfirm"
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		margin: 90px 0 0;
		padding: 0 40px;
		.page-title {
			padding-top: 14px;
			padding-bottom: 26px;
			.tit {
				color: #000;
				font-size: 60px;
				line-height: 84px;
			}
		}
		.addres-info {
			padding: 40px 0;
			border-bottom: 2px solid #dcdcdc;
			.address-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 16px;
				.title {
					line-height: 48px;
					font-size: 36px;
					color: #4A4A4A;
				}
				.change-btn {
					color: #ef364e;
					font-size: 28px;
					line-height: 48px;
					padding-left: 30px;
				}
			}
			.address-body {
				.user-relation {
					display: flex;
					align-items: center;
					height: 48px;
					margin-bottom: 6px;
					font-size: 32px;
					color: #747474;
					.user-name {
						margin-right: 40px;
						font-size: 32px;
						color: #747474;
					}
					.user-phone {
						font-family: PingFangSC-Regular;
					}
				}
				.user-address {
					.address-details {
						display: block;
						line-height: 48px;
						font-size: 28px;
						color: #747474;
					}
				}
			}
		}
		.order-place {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40px 0;
			border-bottom: 2px solid #dcdcdc;
			.title {
				font-size: 36px;
				line-height: 38px;
				color: #4A4A4A;
			}
			.money {
				font-size: 32px;
				color: #000;
			}
		}
		.order-place-colum {
			display: flex;
			flex-direction: column;
			padding: 30px 0;
			border-bottom: 2px solid #dcdcdc;
			.title {
				font-size: 36px;
				color: #4A4A4A;
				line-height: 48px;
				margin-bottom: 15px;
			}
			.order-explain {
				font-size: 28px;
				color: #747474;
				line-height: 48px;
			}
		}
		.remark-container {
			.remark {
				font-size: 28px;
				color: #c4c4c4;
				line-height: 48px;
			}
		}
		.wallet-continer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			height: 100px;
			.icon-wallet {
				height: 44px;
				width: 44px;
				margin-right: 30px;
			}
			.flex-empty {
				height: 1px;
				flex-grow: 2;
			}
			.explain {
				color: #4A4A4A;
				font-size: 30px;
			}
		}
	}
</style>